<template>
  <div class="user-center">
    <!-- 导航栏 -->
    <nav class="gradient-bg text-white shadow-md fixed top-0 w-full z-50 transition-all duration-300">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="text-xl font-bold">个人中心</div>
        <div class="flex space-x-4">
          <button 
            class="hover:opacity-80 transition-opacity"
            @click="handleNotification"
          >
            <i class="fa fa-bell-o text-xl"></i>
          </button>
          <button 
            class="hover:opacity-80 transition-opacity"
            @click="handleSettings"
          >
            <i class="fa fa-cog text-xl"></i>
          </button>
        </div>
      </div>
    </nav>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-24 pb-20">
      <!-- 用户信息卡片 -->
      <section 
        class="mb-8 transform transition-all hover:scale-[1.01] duration-300"
        :style="{ opacity: userInfo ? 1 : 0 }"
      >
        <div class="bg-white rounded-2xl card-shadow overflow-hidden">
          <div class="gradient-bg h-32 relative">
            <div class="absolute -bottom-16 left-8 flex items-end">
              <div class="w-32 h-32 rounded-full border-4 border-white shadow-lg overflow-hidden">
                <img 
                  :src="userInfo.avatarUrl" 
                  alt="用户头像" 
                  class="w-full h-full object-cover"
                >
              </div>
              <div class="ml-4 mb-2">
                <h1 class="text-2xl font-bold text-white text-shadow">{{ userInfo.name }}</h1>
                <p class="text-white/80 text-sm">会员编号：{{ userInfo.memberId }}</p>
              </div>
            </div>
          </div>
          <div class="pt-20 px-6 pb-6">
            <div class="grid grid-cols-3 gap-4 mb-6 text-center">
              <div 
                class="p-3 rounded-xl bg-blue-50"
                v-for="(item, index) in statistics"
                :key="index"
              >
                <p class="text-primary font-bold text-2xl">{{ item.count }}</p>
                <p class="text-gray-500 text-sm">{{ item.label }}</p>
              </div>
            </div>
            
            <div class="space-y-4">
              <div 
                class="flex items-center p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
                v-for="(item, index) in contactInfo"
                :key="index"
              >
                <i :class="item.iconClass" class="text-primary w-8"></i>
                <span>{{ item.value }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 功能菜单 -->
      <section class="space-y-4 mb-8">
        <div class="bg-white rounded-2xl card-shadow overflow-hidden">
          <div class="p-4 border-b border-gray-100">
            <h2 class="font-bold text-lg">我的服务</h2>
          </div>
          <div class="grid grid-cols-4 gap-1">
            <ServiceItem 
              v-for="(item, index) in serviceItems"
              :key="index"
              :item="item"
            />
          </div>
        </div>
      </section>

      <!-- 最近预约 -->
      <section class="mb-8">
        <div class="bg-white rounded-2xl card-shadow overflow-hidden">
          <div class="p-4 border-b border-gray-100 flex justify-between items-center">
            <h2 class="font-bold text-lg">最近预约</h2>
            <a href="#" class="text-primary text-sm" @click="handleViewAll">查看全部</a>
          </div>
          <div class="divide-y divide-gray-100">
            <AppointmentItem 
              v-for="(item, index) in recentAppointments"
              :key="index"
              :item="item"
            />
          </div>
        </div>
      </section>

      <!-- 操作按钮 -->
      <div class="flex justify-center mt-10">
        <button 
          class="w-2/3 py-3 bg-red-500 text-white rounded-full font-medium shadow-lg hover:bg-red-600 transition-colors transform hover:scale-105 duration-300"
          @click="handleLogout"
        >
          <i class="fa fa-sign-out mr-2"></i>退出登录
        </button>
      </div>
    </main>

    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-2 px-4 z-40">
      <div class="grid grid-cols-4 gap-2">
        <NavItem 
          v-for="(item, index) in bottomNav"
          :key="index"
          :item="item"
        />
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟用户数据
const userInfo = ref({
  name: '张三',
  avatarUrl: 'https://picsum.photos/200/200?random=1',
  memberId: 'VIP20230531'
});

const statistics = ref([
  { count: '12', label: '已完成预约' },
  { count: '3', label: '待服务' },
  { count: '2', label: '待评价' }
]);

const contactInfo = ref([
  { iconClass: 'fa fa-phone', value: '138****1234' },
  { iconClass: 'fa fa-envelope', value: 'example@mail.com' },
  { iconClass: 'fa fa-calendar', value: '注册日期：2023-01-15' }
]);

// 服务项配置
const serviceItems = ref([
  {
    icon: 'fa fa-clock-o',
    color: 'bg-blue-100',
    text: '预约记录',
    link: '/appointments'
  },
  {
    icon: 'fa fa-ticket',
    color: 'bg-green-100',
    text: '我的优惠券',
    link: '/coupons'
  },
  {
    icon: 'fa fa-star-o',
    color: 'bg-purple-100',
    text: '我的收藏',
    link: '/favorites'
  },
  {
    icon: 'fa fa-comment-o',
    color: 'bg-orange-100',
    text: '我的评价',
    link: '/reviews'
  }
]);

// 最近预约记录
const recentAppointments = ref([
  {
    title: '常规体检',
    status: '已确认',
    statusColor: 'bg-green-100 text-green-600',
    date: '2023-05-28 09:00-10:00',
    location: '健康中心'
  },
  {
    title: '疫苗接种',
    status: '待确认',
    statusColor: 'bg-blue-100 text-blue-600',
    date: '2023-06-05 14:00-15:00',
    location: '预防接种门诊'
  }
]);

// 底部导航配置
const bottomNav = ref([
  {
    icon: 'fa fa-home',
    text: '首页',
    active: true,
    link: '/'
  },
  {
    icon: 'fa fa-search',
    text: '搜索',
    active: false,
    link: '/search'
  },
  {
    icon: 'fa fa-bell',
    text: '消息',
    active: false,
    link: '/messages'
  },
  {
    icon: 'fa fa-user',
    text: '我的',
    active: true,
    link: '/user'
  }
]);

// 交互方法
const handleNotification = () => {
  console.log('通知中心');
};

const handleSettings = () => {
  console.log('设置中心');
};

const handleViewAll = () => {
  console.log('查看全部预约');
};

const handleLogout = () => {
  // 退出登录逻辑
  console.log('退出登录');
};
</script>

<style scoped lang="scss">
@tailwind base;
@tailwind components;
@tailwind utilities;

.user-center {
  @apply bg-neutral min-h-screen;
}

/* 自定义组件样式（可根据需要提取到单独文件） */
.service-item {
  @apply flex flex-col items-center p-4 hover:bg-gray-50 transition-colors;
  
  .icon-container {
    @apply w-12 h-12 rounded-full mb-2 flex items-center justify-center;
  }
}

.appointment-item {
  @apply p-4 hover:bg-gray-50 transition-colors;
  
  .status-badge {
    @apply text-sm px-2 py-1 rounded-full;
  }
}

.nav-item {
  @apply flex flex-col items-center text-gray-400 hover:text-primary transition-colors;
  
  &.active {
    @apply text-primary;
  }
}
</style>